.loading-next {
	width: 100%;
	height: 100%;
}
.loading-next .loading-next-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.loading-next .loading-next-box-warp {
	width: 80px;
	height: 80px;
}
.loading-next .loading-next-box-warp .loading-next-box-item {
	width: 33.333333%;
	height: 33.333333%;
	background: var(--el-color-primary);
	float: left;
	animation: loading-next-animation 1.2s infinite ease;
	border-radius: 1px;
}
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7) {
	animation-delay: 0s;
}
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8) {
	animation-delay: 0.1s;
}
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9) {
	animation-delay: 0.2s;
}
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6) {
	animation-delay: 0.3s;
}
.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3) {
	animation-delay: 0.4s;
}
@keyframes loading-next-animation {
	0%,
	70%,
	100% {
		transform: scale3D(1, 1, 1);
	}
	35% {
		transform: scale3D(0, 0, 1);
	}
}

/* loading style-1*/
.loader1{
	width: 36px;
	height: 36px;
	background-color: transparent;
	box-shadow: inset 0px 0px 0px 2px #61E8EA;
	border-radius: 50%;
	position: relative;
	margin: calc(50vh - 36px) auto;
}
.loader1:after, .loader1:before{
	position: absolute;
	content:"";
	background-color: #61E8EA;
}
.loader1:after{
	width: 15px;
	height: 2px;
	top: 17px;
	left: 17px;
	transform-origin: 1px 1px;
	animation: minhand 2s linear infinite;
}
.loader1:before{
	width: 12px;
	height: 2px;
	top: 17px;
	left: 17px;
	transform-origin: 1px 1px;
	animation: hrhand 8s linear infinite;
}
@keyframes minhand{
	0%{transform:rotate(0deg)}
	100%{transform:rotate(360deg)}
}
@keyframes hrhand{
	0%{transform:rotate(0deg)}
	100%{transform:rotate(360deg)}
}


/*loading style-2*/
.loader2 {
	width: 35px;
	height: 80px;
	position: relative;
	margin: calc(50vh - 80px) auto;
}
.loader2:after {
	content: "";
	position: absolute;
	inset: 0 0 20px;
	border-radius: 15px 15px 10px 10px;
	padding: 1px;
	background: repeating-linear-gradient(-45deg,#91d2e2 0 8px,#1296a7 0 12px) content-box;
	--c: radial-gradient(farthest-side,#000 94%,#0000);
	-webkit-mask:
					linear-gradient(#0000 0 0),
					var(--c) -10px -10px,
					var(--c)  15px -14px,
					var(--c)   9px -6px,
					var(--c) -12px  9px,
					var(--c)  14px  9px,
					var(--c)  23px 27px,
					var(--c)  -8px 35px,
					var(--c)   50% 50%,
					linear-gradient(#000 0 0);
	mask:
					linear-gradient(#000 0 0),
					var(--c) -10px -10px,
					var(--c)  15px -14px,
					var(--c)   9px -6px,
					var(--c) -12px  9px,
					var(--c)  14px  9px,
					var(--c)  23px 27px,
					var(--c)  -8px 35px,
					var(--c)   50% 50%,
					linear-gradient(#0000 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude,add,add,add,add,add,add,add,add;
	-webkit-mask-repeat: no-repeat;
	animation: l2 3s infinite;
}
.loader2:before {
	content: "";
	position: absolute;
	inset: 50% calc(50% - 4px) 0;
	background: #e0a267;
	border-radius: 50px;
}
@keyframes l2 {
	0%   {-webkit-mask-size: auto,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
	10%  {-webkit-mask-size: auto,25px 25px,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
	20%  {-webkit-mask-size: auto,25px 25px,25px 25px,0 0,0 0,0 0,0 0,0 0,0 0}
	30%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,0 0,0 0,0 0,0 0,0 0}
	40%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,0 0,0 0,0 0,0 0}
	50%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,0 0,0 0,0 0}
	60%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,0 0,0 0}
	70%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,25px 25px,0 0}
	80%,
	100% {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,25px 25px,200% 200%}
}

/*loading style-3*/
/* HTML: <div class="loader"></div> */
.loader3 {
	width: 35px;
	height: 80px;
	margin: calc(50vh - 80px) auto;
	position: relative;
}
.loader3:after {
	content: "";
	position: absolute;
	inset: 0 0 20px;
	border-radius: 50px 50px 10px 10px;
	padding: 1px;
	background: linear-gradient(#ff4d80 33%,#ffa104 0 66%, #01ddc7 0) content-box;
	--c:radial-gradient(farthest-side,#000 94%,#0000);
	-webkit-mask:
					linear-gradient(#0000 0 0),
					var(--c) -10px -10px,
					var(--c)  15px -14px,
					var(--c)   9px -6px,
					var(--c) -12px  9px,
					var(--c)  14px  9px,
					var(--c)  23px 27px,
					var(--c)  -8px 35px,
					var(--c)   50% 50%,
					linear-gradient(#000 0 0);
	mask:
					linear-gradient(#000 0 0),
					var(--c) -10px -10px,
					var(--c)  15px -14px,
					var(--c)   9px -6px,
					var(--c) -12px  9px,
					var(--c)  14px  9px,
					var(--c)  23px 27px,
					var(--c)  -8px 35px,
					var(--c)   50% 50%,
					linear-gradient(#0000 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude,add,add,add,add,add,add,add,add;
	-webkit-mask-repeat: no-repeat;
	animation: l3 3s infinite ;
}
.loader3:before {
	content: "";
	position: absolute;
	inset: 50% calc(50% - 4px) 0;
	background: #e0a267;
	border-radius: 50px;
}
@keyframes l3 {
	0%   {-webkit-mask-size: auto,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
	10%  {-webkit-mask-size: auto,25px 25px,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
	20%  {-webkit-mask-size: auto,25px 25px,25px 25px,0 0,0 0,0 0,0 0,0 0,0 0}
	30%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,0 0,0 0,0 0,0 0,0 0}
	40%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,0 0,0 0,0 0,0 0}
	50%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,0 0,0 0,0 0}
	60%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,0 0,0 0}
	70%  {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,25px 25px,0 0}
	80%,
	100% {-webkit-mask-size: auto,25px 25px,25px 25px,30px 30px,30px 30px,25px 25px,25px 25px,25px 25px,200% 200%}
}

/*loading style-4*/
/* HTML: <div class="loader"></div> */
.loader4 {
	height: 35px;
	width: 80px;
	//margin-left: 0px;
	margin: calc(50vh - 80px) auto;
	background:
					radial-gradient(farthest-side,#ffd1d1 94%,#0000 ) 4px 22px/5px 5px,
					radial-gradient(farthest-side,#ffd1d1 94%,#0000 ) 12px 18px/5px 5px,
					radial-gradient(farthest-side,#ffd1d1 94%,#0000 ) 3px 6px/8px 8px,
					radial-gradient(farthest-side,#eb8594 90%,#0000 94%) left/20px 100%,
					#bd3342;
	background-repeat: no-repeat;
	border-radius: 0 50px 50px 0;
	border-top-left-radius: 30px 40px;
	border-bottom-left-radius: 30px 40px;
	animation: l7 3s infinite steps(10);
	position: relative;
}
.loader4::before {
	content: " ";
	position: absolute;
	inset: calc(50% - 8px) -10px calc(50% - 8px) auto;
	width: 15px;
	background: #bd3342;
	clip-path: polygon(0 50%,100% 0,70% 50%,100% 100%);
}
@keyframes l7 {
	//100% {width: 20px;margin-left:60px;}
	100% {width: 20px;margin-left:calc(50vw - 20px);}
}

/*loading style-5*/
/* HTML: <div class="loader"></div> */
.loader5 {
	width: 80px;
	height: 40px;
	border-radius: 0 0 100px 100px;
	border: 5px solid #538a2d;
	border-top: 0;
	margin: calc(50vh - 40px) auto;
	box-sizing: border-box;
	background:
					radial-gradient(farthest-side at top,#0000 calc(100% - 5px),#e7ef9d calc(100% - 4px)),
					radial-gradient(2px 3px,#5c4037 89%,#0000) 0 0/17px 12px,
					#ff1643;
	--c:radial-gradient(farthest-side,#000 94%,#0000);
	-webkit-mask:
					linear-gradient(#0000 0 0),
					var(--c) 12px -8px,
					var(--c) 29px -8px,
					var(--c) 45px -6px,
					var(--c) 22px -2px,
					var(--c) 34px  6px,
					var(--c) 21px  6px,
					linear-gradient(#000 0 0);
	mask:
					linear-gradient(#000 0 0),
					var(--c) 12px -8px,
					var(--c) 29px -8px,
					var(--c) 45px -6px,
					var(--c) 22px -2px,
					var(--c) 34px  6px,
					var(--c) 21px  6px,
					linear-gradient(#0000 0 0);
	-webkit-mask-composite:destination-out;
	mask-composite:exclude,add,add,add,add,add,add;
	-webkit-mask-repeat: no-repeat;
	animation: l8 3s infinite;
}
@keyframes l8 {
	0%   {-webkit-mask-size: auto,0 0,0 0,0 0,0 0,0 0,0 0}
	15%  {-webkit-mask-size: auto,20px 20px,0 0,0 0,0 0,0 0,0 0}
	30%  {-webkit-mask-size: auto,20px 20px,20px 20px,0 0,0 0,0 0,0 0}
	45%  {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,0 0,0 0,0 0}
	60%  {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,20px 20px,0 0,0 0}
	75%  {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,0 0}
	90%,
	100% {-webkit-mask-size: auto,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px}
}
